<template>
  <el-form
    :model="form"
    label-width="auto"
    style="max-width: 800px"
    :inline="true"
  >
    <span class="span-Size">基本信息</span><br />
    <el-form-item label="姓名">
      <el-input v-model="form.firstName" placeholder="请输入羊场全程" />
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="form.gender">
        <el-radio :value="true" size="large">男</el-radio>
        <el-radio :value="false" size="large">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="证件类型">
      <el-select v-model="form.idType" placeholder="请选择证件类型">
        <el-option label="身份证" value="1" />
        <el-option label="护照" value="2" />
        <el-option label="军官证" value="3" />
        <el-option label="士兵证" value="4" />
        <el-option label="港澳来往通行证" value="5" />
        <el-option label="警官证" value="6" />
        <el-option label="外国人永久居留证" value="7" />
        <el-option label="边民出入同行证" value="8" />
        <el-option label="其他" value="9" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-input v-model="form.idNumber" placeholder="（必填）" />
    </el-form-item>
    <el-form-item label="联系电话">
      <el-input v-model="form.phoneNumber" placeholder="（必填）" />
    </el-form-item>
    <el-form-item label="电子邮箱">
      <el-input v-model="form.email" />
    </el-form-item>
    <el-form-item label="毕业院校">
      <el-input v-model="form.university" />
    </el-form-item>
    <el-form-item label="学历">
      <el-select v-model="form.educationLevel" style="width: 100px">
        <el-option label="博士" value="博士" />
        <el-option label="硕士" value="硕士" />
        <el-option label="本科" value="本科" />
        <el-option label="大专" value="大专" />
        <el-option label="中考" value="中考" />
        <el-option label="高中" value="高中" />
        <el-option label="初中" value="初中" />
        <el-option label="小学" value="小学" />
        <el-option label="其他" value="其他" />
      </el-select>
    </el-form-item>
    <br /><span class="span-Size">入职信息</span><br />
    <el-form-item label="单位">
      <el-select v-model="form.company" placeholder="请输入详细地址">
        <el-option label="龚光养羊" :value="1" />
        <el-option label="大力养羊" :value="2" />
        <el-option label="亲亲养羊" :value="3" />
        <el-option label="草原养羊" :value="4" />
      </el-select>
    </el-form-item>
    <el-form-item label="员工状态" placeholder="--请选择--">
      <el-select v-model="form.employmentStatus">
        <el-option label="适用员工" :value="1" />
        <el-option label="在职员工" :value="2" />
        <el-option label="实习员工" :value="3" />
        <el-option label="临时工人" :value="4" />
        <el-option label="调至员工" :value="5" />
        <el-option label="专家顾问" :value="6" />
        <el-option label="返聘人员" :value="7" />
      </el-select>
    </el-form-item>
    <el-form-item label="部门" placeholder="--请选择--">
      <el-select v-model="form.department">
        <el-option label="策划部" :value="1" />
        <el-option label="秘书部" :value="2" />
        <el-option label="财务部" :value="3" />
      </el-select>
    </el-form-item>
    <el-form-item label="入职时间">
      <el-date-picker
        v-model="form.entryDate"
        type="date"
        placeholder="入职日期"
      />
    </el-form-item>
    <el-form-item label="转正时间">
      <el-date-picker
        v-model="form.probationDate"
        type="date"
        placeholder="转正日期"
      />
    </el-form-item>
    <el-form-item label="职务">
      <el-select
        v-model="form.jobTitle"
        placeholder="亲选择"
        style="width: 240px"
      >
        <el-option label="总经理" :value="1" />
        <el-option label="人力经理" :value="2" />
        <el-option label="采购经理" :value="3" />
        <el-option label="生产经理" :value="4" />
        <el-option label="销售经理" :value="5" />
        <el-option label="财务经理" :value="6" />
      </el-select>
    </el-form-item>
    <el-form-item label="岗位">
      <el-select
        v-model="form.position"
        placeholder="亲选择"
        style="width: 240px"
      >
        <el-option label="事业部总经理" :value="1" />
        <el-option label="单位人力经理" :value="2" />
        <el-option label="单位采购经理" :value="3" />
        <el-option label="单位生产经理" :value="4" />
        <el-option label="单位销售经理" :value="5" />
        <el-option label="单位财务经理" :value="6" />
      </el-select>
    </el-form-item>
    <el-form-item label="人事级别">
      <el-select
        v-model="form.hrLevel"
        placeholder="亲选择"
        style="width: 240px"
      >
        <el-option label="A1" :value="1" />
        <el-option label="A2" :value="2" />
        <el-option label="A3" :value="3" />
        <el-option label="B1" :value="4" />
        <el-option label="B2" :value="5" />
        <el-option label="B3" :value="6" />
        <el-option label="C1" :value="7" />
        <el-option label="C2" :value="8" />
        <el-option label="C3" :value="9" />
        <el-option label="D1" :value="10" />
        <el-option label="D2" :value="11" />
        <el-option label="D3" :value="12" />
      </el-select>
    </el-form-item>
    <br />
    <span class="span-Size">账号信息</span><br />
    <el-form-item label="账号">
      <el-input v-model="form.account" placeholder="（必填）" />
    </el-form-item>
    <el-form-item label="密码" placeholder="（必填）">
      <el-input v-model="form.password" show-password placeholder="（必填）" />
    </el-form-item>
    <el-form-item label="角色">
      <el-select
        v-model="form.hrLevel"
        placeholder="亲选择"
        style="width: 240px"
      >
        <el-option label="超级管理员" :value="1" />
        <el-option label="普通用户" :value="2" />
        <el-option label="管理员" :value="3" />
      </el-select>
    </el-form-item>
    <br />
    <el-form-item>
      <el-button
        type="primary"
        style="width: 240px; margin-left: 50%"
        @click="submitForm"
      >
        提交
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute();
//生命周期 钩子函数
onMounted(() => {});

//定义变量
const form = reactive({
  firstName: "",
  gender: true,
  idType: "",
  idNumber: "",
  phoneNumber: "",
  email: "",
  university: "",
  educationLevel: "",
  company: "",
  employmentStatus: "",
  department: "",
  entryDate: "2024-11-25T03:42:59.918Z",
  probationDate: "2024-11-25T03:42:59.918Z",
  jobTitle: "",
  position: "",
  hrLevel: "",
  account: "",
  password: "",
});

//人员添加
const submitForm = () => {
  axios
    .post("http://localhost:5012/api/RBACs/Handle", {
      firstName: form.firstName,
      gender: form.gender,
      idType: form.idType,
      idNumber: form.idNumber,
      phoneNumber: form.phoneNumber,
      email: form.email,
      university: form.university,
      educationLevel: form.educationLevel,
      company: form.company,
      employmentStatus: form.employmentStatus,
      department: form.department,
      entryDate: form.entryDate,
      probationDate: form.probationDate,
      jobTitle: form.jobTitle,
      position: form.position,
      hrLevel: form.hrLevel,
      account: form.account,
      password: form.password,
    })
    .then((res) => {
      console.log(res);
      if (res.data.code == 0) {
        ElMessage.success("添加成功!");
        router.push("UserListView");
      } else {
        ElMessage.error("添加失败!");
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped>
.span-Size {
  font-size: 20px;
  /* 设置字体大小 */
  font-weight: bold;
  /* 设置字体加粗 */
  margin-right: 10px;
  /* 设置右边距 */
}

.el-input {
  width: 200px;
}

.el-select {
  width: 200px;
}
</style>
